<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link href="./css/theme.css" rel="stylesheet">
    <link href="./css/index.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <title>Test Touzi </title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        a {
            text-decoration: none;
        }

        .toolbar {
            float: none;
            height: 60px;
            line-height: 60px;
            position: relative;
            width: calc(100% - 40px);
            margin-left: 20px;
            text-decoration: none;
            border-bottom: 1px solid rgba(254, 221, 159, 0.6);
        }

        .logo {
            margin: 0 auto;
            float: none;
            display: block;
            text-decoration: none;
            width: 200px;
            height: 60px;
            top: -60px;
            position: relative;
            background: transparent url(./images/logo.png) no-repeat center center;
            background-size: 60%;
        }

        .telegram {
            transition: opacity 0.5s;
            vertical-align: middle;
            display: inline-block;
            width: 50px;
            height: 50px;
            background-size: contain;
            background: url('./images/telegram.svg') no-repeat center center;
        }

        .fix_right {
            position: absolute;
            right: 0px;
            top: 0px;
        }

        ul li {
            float: left;
            display: block;
            margin: 0px 6px;
        }
    </style>

</head>
<body>
<div class="toolbar">

    <section style="height: 70px;">
        <a target="_blank" href="https://t.me/joinchat/Lmz4wxBm5Rh5RlnMsa2BGA">
            <i class="telegram"></i>
        </a>
        <a class="logo" href="/"></a>
        <a class="fix_right" href="javascript:void(0)" style="text-decoration: underline">EN</a>
    </section>
</div>

<div class="history">
    <h4>开奖结果</h4>
    <ul>
        <li><span class="rball">5</span></li>
        <li><span class="rball rball_color2">3</span></li>
        <li><span class="rball rball_color3">17</span></li>
        <li><span class="rball rball_color3">14</span></li>
        <li><span class="rball rball_color2">4</span></li>
        <li><span class="rball rball_color2">7</span></li>
        <li><span class="rball rball_color2">13</span></li>
        <li><span class="rball ">6</span></li>
        <li><span class="rball ">6</span></li>
        <li><span class="rball rball_color3">17</span></li>
        <li><span class="rball rball_color3">14</span></li>
        <li><span class="rball rball_color2">5</span></li>
        <li><span class="rball rball_color3">14</span></li>
    </ul>
    <button href="#">只看我</button>
</div>
<div class="game">
    <div class="select_area">
        <div class="Large ">
            <span class="tip">逢全色通吃</span>
            <span class="tip" style="float:right">一中一</span>
            <span class="big_tip">大</span>

        </div>
        <div class="same_quick_select">
            <div class="single_same_select">
                <ul>
                    <li class="option option666 "></li>
                    <li class="option option555"></li>
                    <li class="option option444"></li>
                    <li class="option option333"></li>
                    <li class="option option222"></li>
                    <li class="option option111"></li>
                </ul>

                <p>该六门<br/>
                    一中一百八十</p>

            </div>
            <div class="all_same_select ">
                <p> 一中三十</p>
            </div>
        </div>

        <div class="Large ">
            <span class="tip">逢全色通吃</span>
            <span class="tip" style="float:right">一中一</span>
            <span class="big_tip">小</span>
        </div>
        <div class="single_select">
            <ul>
                <li class="option ">
                    <span>17</span>
                    <small>一中六十</small>
                </li>
                <li class="option  ">
                    <span>16</span>
                    <small>一中三十</small>
                </li>
                <li class="option  "><span>15</span>
                    <small>一中一十七</small>
                </li>
                <li class="option  "><span>14</span>
                    <small>一中一十二</small>
                </li>
                <li class="option  "><span>13</span>
                    <small>一中八</small>
                </li>
                <li class="option  "><span>12</span>
                    <small>一中六</small>
                </li>
                <li class="option  "><span>11</span>
                    <small>一中六</small>
                </li>
                <li class="option  "><span>10</span>
                    <small>一中六</small>
                </li>
                <li class="option  "><span>9</span>
                    <small>一中六</small>
                </li>
                <li class="option  "><span>8</span>
                    <small>一中八</small>
                </li>
                <li class="option  "><span>7</span>
                    <small>一中一十二</small>
                </li>
                <li class="option  "><span>6</span>
                    <small>一中一十七</small>
                </li>
                <li class="option  "><span>5</span>
                    <small>一中三十</small>
                </li>
                <li class="option  "><span>4</span>
                    <small>一中六十</small>
                </li>
            </ul>

            <p>该六门<br>
                一中一百八十</p>

        </div>
    </div>

</div>
<div class="bet_area">
    <div>
        <span class="bets">您的押注：<label>0.8</label> ETH</span>
        <span class="bets" style="float:right">您本轮有机会获得：<label>2</label> ETH</span>
    </div>
    <div class="quick-bets">
        <button class="">0.05</button>
        <button class="">0.10</button>
        <button class="">0.15</button>
        <button>最大</button>
    </div>
    <div class="submit">
        <button class="cancel" type="reset">取消</button>
        <button class="confirm" type="submit">下注</button>
    </div>
</div>

<div class="bg ">
    <div class="mask"></div>
    <div class="bet_result">
        <div>
            <div class="box cell1"><i></i></div>
            <div class="box cell2"><i></i><i></i></div>
            <div class="box cell3"><i></i><i></i><i></i></div>
            <!--<div class="box cell4">-->
            <!--<div><i></i><i></i></div>-->
            <!--<div><i></i><i></i></div>-->
            <!--</div>-->
            <!--<div class="box cell5">-->
            <!--<div><i></i><i></i></div>-->
            <!--<div><i></i></div>-->
            <!--<div><i></i><i></i></div>-->
            <!--</div>-->
            <!--<div class="box cell6"><div><i></i><i></i><i></i></div><div><i></i><i></i><i></i></div></div>-->
        </div>
        <h4>赢得了 <a class="gain" href="javascript:void(0)">0.12</a>以太币</h4>
        <button type="button" class="again">再来一局</button>
        <div id="bet_result_detail">
            <p>地址 0x41564651</p>
            <div>结果
            <!--<div class="box cell1"><i></i></div>-->
            <!--<div class="box cell2"><i></i><i></i></div>-->
            <!--<div class="box cell3"><i></i><i></i><i></i></div>-->
                        1 2 3
            </div>
            <p>押注 大(0.5ETH),15(0.5ETH)</p>
            <p>乐透号 374 </p>
            <h4>赢得了 <label>0.12</label>以太币</h4>
        </div>
    </div>


</div>


<script>
    (function () {
        function resize() {
            var body = document.getElementsByTagName('body')[0];
            var html = document.getElementsByTagName('html')[0];
            var width = html.clientWidth;
            var height = html.clientHeight;
            var max = width > height ? width : height;
            var min = width > height ? height : width;
            body.style.width = max + "px";
            body.style.height = min + "px";
        }

        resize();
        window.addEventListener("resize", resize);
        $(".confirm").click(function () {
            $(".bg").show()
        })
        $(".again").click(function () {
            $(".bg").hide()
        })
        $(".gain").click(function () {
            $("#bet_result_detail").show()
        })
    })();
</script>
</body>
</html>
